<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>11简版小广告</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    @keyframes heartBeat {
      0% {
        transform: scale(1)
      }

      14% {
        transform: scale(1.1)
      }

      28% {
        transform: scale(1)
      }

      42% {
        transform: scale(1.1)
      }

      70% {
        transform: scale(1)
      }
    }

    #ad {
      width: 300px;
      height: 250px;
      background-color: #000;
      position: fixed;
      bottom: 5px;
      right: 5px;
      color: #fff;
      animation: heartBeat 3s linear infinite;
      display: none;
    }

    #ad .title {
      overflow: hidden;
      width: 100%;
    }

    #ad .title .countBox {
      float: left;
    }

    #ad .title #close {
      float: right;
      width: 20px;
      height: 20px;
      background-color: rgba(255, 255, 255, .3);
      text-align: center;
      line-height: 20px;
      cursor: pointer;
    }

    #ad img {
      width: 100%;
      height: 200px;
      margin: 15px 0;
    }
  </style>
</head>

<body>
  <div id="ad">
    <div class="title" data-tag="true">
      <div class="countBox">距离广告关闭还有<span id="count">10</span>秒</div>
      <div id="close">×</div>
    </div>
    <img src="img/guanggao.jpeg" alt="">
  </div>
</body>
<script>
  //小广告在页面停留3s后出现
  //且出现10s倒计时，10s后，小广告自行关闭；
  //用户点击关闭按钮，也可关闭小广告
  var oAd = document.getElementById("ad");
  var oCount = document.getElementById("count");
  var oClose = document.getElementById("close");
  var timer = null;

  setTimeout(function () {
    oAd.style.display = "block";

    timer = setInterval(function () {
      var countVal = oCount.innerHTML;//拿值
      countVal--;//操作值

      //当时间到了的时候，要清除计时器，且让这个广告消失
      if (countVal <= 0) {
        clearInterval(timer);
        oAd.style.display = "none";
      }

      oCount.innerHTML = countVal;//赋新值
    }, 1000)
  }, 3000)


  oClose.onclick = function () {
    clearInterval(timer);
    oAd.style.display = "none";
  }


</script>

</html>